.highClassWrap {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 1400px;
  height: calc(100vh - 48px);
  overflow: hidden;
  color: #5e6780;
  background: #ffffff;
  .highClassSectionLeftWrap {
    position: relative;
    flex: 1;
    padding: 0;
    font-size: 16px;

    .highClassSectionLeft {
      // margin-top:46px;
      position: absolute;
      top: 100%;
      bottom: 0;
      left: 0;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
      padding: 0;
      font-size: 16px;
      &.highClassSlideDown {
        animation: slideUpHighClass 0.6s ease-in-out forwards;
      }
      &.highClassSlideDown2 {
        animation: slideUpHighClass2 0.6s ease-in-out forwards;
      }
    }
  }
  .topRightRobotBox {
    position: absolute;
    top: 9px;
    right: 12px;
    z-index: 100;
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: #c4d2de;
    border-radius: 1000px;
    box-shadow: 0px 11px 9px 0px rgba(45, 48, 59, 0.15);
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      transform: scale(1.1); /* 初始状态为1.1倍 */
      transition: transform 0.5s ease-in-out; /* 添加 transform 属性的过渡效果 */
    }

    &:hover {
      img {
        animation: zoomInOut 0.5s cubic-bezier(1, 1, 0.5, 1); /* 应用 zoomInOut 动画效果 */
      }
    }
    &.scaleMin {
      img {
        transform: scale(0.8);
        transition: transform 0.5s ease-in-out; /* 添加 transform 属性的过渡效果 */
      }
      &:hover {
        img {
          animation: zoomInOut2 0.5s cubic-bezier(1, 1, 0.5, 1); /* 应用 zoomInOut 动画效果 */
        }
      }
    }
  }
  @keyframes zoomInOut {
    0%,
    100% {
      transform: scale(1.1); /* 起始和结束状态：放大到1.1倍 */
    }
    50% {
      transform: scale(0.8); /* 中间状态：缩小到0.8倍 */
    }
  }

  @keyframes zoomInOut2 {
    0%,
    100% {
      transform: scale(0.8); /* 起始和结束状态：缩小到0.8倍 */
    }
    50% {
      transform: scale(1.1); /* 中间状态：放大到1.1倍 */
    }
  }
  .scan-effect {
    overflow: hidden;
  }

  .scan-line {
    position: absolute;
    width: 100%;
    height: 120px; /* 扫描线的高度 */
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.85),
      transparent
    ); /* 使用线性渐变创建扫描线效果，从上到下 */
    animation: scan 6s linear infinite; /* 扫描线动画，2秒完成一次扫描，线性运动，无限循环 */
  }

  @keyframes scan {
    0%,
    100% {
      transform: translateY(-100%); /* 扫描线的起始和结束位置在上方 */
    }
    50% {
      transform: translateY(100%); /* 扫描线的中间位置在下方 */
    }
  }

  .highClassSectionRight {
    position: relative;
    z-index: 100;
    display: inline-flex;
    max-width: 531px;
    height: calc(100% - 62px);
    margin: 37px 42px 25px 0;
    background: #f1f5f9;
    border: 1px solid rgba(0, 117, 255, 0.19);
    border-radius: 20px;
    box-shadow: 3px 2px 34px 0px rgba(61, 68, 133, 0.15);
    &.expend {
      overflow: hidden;
      animation: promptMove 0.6s forwards ease-in-out;
      .topMasking {
        z-index: 1000;
        height: 100%;
        background: #f1f5f9;
      }
      .command-send-wrap {
        //解决隐藏动画生效后 输入框还存在的问题
        display: none;
      }
    }
    &.collapse {
      animation: promptMove2 0.6s forwards ease-in-out;
    }
  }
  @keyframes promptMove {
    0% {
      width: 100%;
      height: calc(100% - 62px);
      opacity: 1;
    }

    100% {
      width: 0;
      height: 0;
      opacity: 0.2;
    }
  }

  @keyframes promptMove2 {
    0% {
      width: 0;
      height: 0;
      opacity: 0.2;
      // position: absolute;
      // top:50px;
      // right: 40px;
    }
    100% {
      width: 100%;
      height: calc(100% - 62px);
      opacity: 1;
      // position: relative;
    }
  }
  .expend-ico {
    position: absolute;
    top: 6px;
    // right: 548px;
    left: -32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
  }
  .func-items {
    position: fixed;
    top: 48px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 53px;
    height: 100%;
    background: #fff;
    border-left: 1px solid rgba(151, 151, 151, 0.2);
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-top: 30px;
      color: #5e6780;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      &.select {
        background: #f3f3f8;
      }
    }
  }
}

//响应式

@media screen and (max-width: 1560px) {
  .highClassWrap {
    // background: red;
    .highClassSectionLeft {
      flex: 1;
      .articleTabWrap {
        margin-right: 24px;
      }
    }
    .highClassSectionRight {
      width: 35%;
    }
  }
}
@media screen and (max-width: 1080px) {
  .highClassWrap {
    // background: blue;
  }
}
.custom-saveArticleSpace {
  .ant-message-notice-content {
    padding: 9px 47px !important;
    color: #fff;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    line-height: 20px;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px;
    box-shadow: 0px 13px 36px 0px rgba(54, 60, 81, 0.15) !important;
    .anticon {
      display: none;
    }
  }
}

.highClassWrap {
  .highClassSectionLeftWrap {
    .ReferenceSpaceArticleOutlineWrap {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      width: calc(100% - 169px);
      min-width: 1178px;
      height: calc(100% - 46px);
      margin: 0 109px 46px 60px;
      background: #f7f9fc;
      border: 1px solid rgba(144, 151, 193, 0.3);
      border-radius: 0px 0px 20px 20px;
      &.highClassSlideUp {
        animation: slideDownHighClass 0.6s ease-in-out forwards;
      }
      &.highClassSlideUp2 {
        animation: slideDownHighClass2 0.6s ease-in-out forwards;
      }
      .slideBtnWrap {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: inline-block;
        width: auto;
        .ant-btn {
          width: 36px;
          height: 36px;
          line-height: 28px;
        }
      }
    }
  }
}

@keyframes slideDownHighClass {
  0% {
    top: 0;
  }
  100% {
    top: calc(-100% + 105px);
  }
}
@keyframes slideDownHighClass2 {
  0% {
    top: calc(-100% + 105px);
  }
  100% {
    top: 0;
  }
}

@keyframes slideUpHighClass {
  0% {
    top: 100%;
  }
  100% {
    top: 9%;
  }
}
@keyframes slideUpHighClass2 {
  0% {
    top: 9%;
  }
  100% {
    top: 100%;
  }
}
.highClassSlideDown2 {
  .progressWrap {
    display: none;
  }
}
.enterBrainSpaceBtnBox {
  display: inline-block;
  height: 36px;
  margin-top: -3px;
  padding: 0 10px;
  line-height: 30px;
  vertical-align: middle;
  background: #f1f5f9;
  border: 1px solid rgba(0, 117, 255, 0.19);
  border-radius: 20px;
  .ant-btn {
    margin: 0 !important;
    line-height: 26px;
    vertical-align: middle;
    &:hover {
      background: none;
    }
  }
}

/* 当屏幕宽度小于1840px时 调整左边的样式 */
@media screen and (max-width: 1840px) {
  .highClassWrap {
    .ReferenceSpaceArticleOutlineWrap {
      width: calc(100% - 40px) !important;
      min-width: auto !important;
      max-width: 1178px;
      margin: 0 20px 46px 20px !important;
      .referenceSpaceWrap {
        min-width: auto;
      }
      .articleOutlineWrap {
        width: 36.5%;
      }
    }
  }
}
